<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 20px;
        }

        header {
            background-color: pink;
        }

        nav {
            width: 80%;
            background-color: rgb(243, 73, 101);
        }

        div {
            width: 80%;
            background-color: rgb(163, 2, 29);
        }

        a {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <div>
                <a href="">zheshia1</a>
                <a href="">zheshia2</a>
                <a href="">zheshia3</a>
                <a href="">zheshia4</a>
                <a href="">zheshia5</a>
            </div>
        </nav>
    </header>
    <script>
        var header = document.querySelector("header");
        var nav = document.querySelector("nav");
        var div = document.querySelector("div");
        var as = document.querySelectorAll("a");


        header.onclick = function (e) {
            // 事件对象,每个事件都有事件对象 ,会记录当前事件的事件信息
            // console.log(e);
            console.log("header被点击了");
        }
        nav.onclick = function (e) {
            console.log("nav被点击了");
            e.stopPropagation();
        }
        // div.onclick = function(e){
        //     console.log("div被点击了");
        // }
        // 事件(event) : 表示用户在浏览器上执行一些行为(点击,移动,按下),js监听这些行为作出处理
        as[0].onclick = function (e) {
            // 事件对象提供的函数 用来当前标签自带的页面跳转(阻止标签的默认事件)
            e.preventDefault();
            // 阻止事件的传播
            // e.stopPropagation();
            console.log("第一个a被点击了");
        }

        // 当同一个事件属性再次设置 会覆盖之前的
        // as[0].onclick = function(e){
        //     // 事件对象提供的函数 用来当前标签自带的页面跳转(阻止标签的默认事件)
        //     e.preventDefault();
        //     // 阻止事件的传播
        //     // e.stopPropagation();
        //     console.log("第一个a被点击了222222");
        // }
        // 删除事件
        // as[0].onclick = null;

        // 事件传播 (机制)
        // 当点击一个标签 会由html开始向内一层一层的查找到当前被点击的标签
        // 然后再由内(被点击的标签)向外一层一层的触发事件
        // 由外向内叫捕获 再 由内向外叫冒泡
        // 事件默认在冒泡阶段执行




    </script>
</body>

</html>